//内部标准清单
<template>
 <div class="e-table">
    <div class="e-tree-table">
        <div class="top">
            <div class="left">
                <div>
                    <el-form label-width="130px">
                        <el-form-item label="结构细目维度:">
                            <el-radio-group v-model="veidoo" @change="toggleDetail">
                                <el-radio :label="true">结构名称-->细目</el-radio>
                                <el-radio :label="false">细目-->结构名称</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="right">
                <div>
                    <el-input
                        placeholder="输入结构名称、细目编号、细目名称搜索"
                        size="small"
                        v-model="keyword"
                        @blur="search"
                        style="width:300px"
                    >
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
                    </el-input>
                </div>
            </div>
        </div>
        <!-- 结构名称--细目 -->
        <el-table key="aa"
            v-if="veidoo"
            class="table"
            :data="contractListTable"
            border
            style="width: 100%"
            row-key="billId"
            lazy
            :load="onload"
            :tree-props="{
                children: 'children',
                hasChildren: 'hasChildren'
            }"
        >
            <el-table-column label="操作" width="100" align='left'>
            </el-table-column>
            <el-table-column prop="structureName" label="结构名称" min-width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="itemNo" label="细目编号" min-width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="itemName" label="细目名称" min-width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="unit" label="计量单位" width="120">
            </el-table-column>
            <el-table-column prop="firstChangeQuantity" label="0#变更数量" width="150">
            </el-table-column>
            <el-table-column prop="ownerIssuedQuantity" label="业主下发数量" width="150">
            </el-table-column>
            <el-table-column prop="firstChangeIncrementDecrement" label="0#变更增减量" width="150">
            </el-table-column>
        </el-table>
        <!-- 细目--结构名称 -->
        <el-table key="bb"
            v-else
            class="table"
            :data="contractListTable"
            border
            style="width: 100%"
            row-key="thisLevelId"
            lazy
            :load="onload"
            :tree-props="{
                children: 'children',
                hasChildren: 'hasChildren'
            }"
        >
            <el-table-column label="操作" width="100" align='left'>
            </el-table-column>
            <el-table-column prop="itemNo" label="细目编号" min-width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="itemName" label="细目名称" min-width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="unit" label="计量单位" width="120">
            </el-table-column>
            <el-table-column prop="structureName" label="结构名称" min-width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="firstChangeQuantity" label="0#变更数量" width="150">
            </el-table-column>
            <el-table-column prop="ownerIssuedQuantity" label="业主下发数量" width="150">
            </el-table-column>
            <el-table-column prop="firstChangeIncrementDecrement" label="0#变更增减量" width="150">
            </el-table-column>
        </el-table>

    </div>
 </div>
</template>

<script>
import request from '@/api/landlordContract/ownerIssueLise.js'
export default {
    components: {},
    props: {},
    data () {
        return {
            veidoo: true, //默认为结构名称-->细目
            billid: '1525402457467322370', //测试暂时写死
            contractListTable: [], //清单信息表格
            keyword: '',
        }
    },
    watch: {},
    computed: {},
    created () {
        this.getStructureToListInfo()
    },
    mounted () {},
    methods: {
        //默认  结构->细目
        getStructureToListInfo () {
            const params = {
                'name': '',
                'parentId': '0' //首级默认为0,下级传本级id
            }
            //结构->细目
            request.getInStructureToList(params).then(res=>{
                res.forEach(item=>{
                    item.hasChildren = item.isDetailed ? false : true  //是否子级  0不是 1是
                    item.children = []
                })
                this.contractListTable = res
            })
        },
        //细目->结构
        getListToStructuretInfo () {
            const params = {
                'name': '',
                'parentId': '0' //首级默认为0,下级传本级id
            }
            //细目->结构
            request.getInlistToStructure(params).then(res=>{
                res.forEach(item=>{
                    item.hasChildren = item.isDetailed ? false : true  //是否子级  0不是 1是
                    item.children = []
                })
                this.contractListTable = res
            })
        },
        //获取子级的数据
        async getChildrenInfo (thisLevelId) {
            //if是true 结构->细目 false 细目->结构
            if(this.veidoo) {
                const params = {
                    'name': '',
                    'parentId': thisLevelId  //首级默认为0,下级传本级id
                }
                let result = await request.getInStructureToList(params) //结构->细目
                result.forEach(item=>{
                    item.hasChildren = item.isDetailed ? false : true  //是否子级 0不是 1 是
                    item.children = []
                })
                return result
            }else{
                const params = {
                    'name': '',
                    'parentId': thisLevelId  //首级默认为0,下级传本级id
                }
                let result = await request.getInlistToStructure(params) //细目->结构
                result.forEach(item=>{
                    item.hasChildren = item.isDetailed ? false : true  //是否子级 0不是 1 是
                    item.children = []
                })
                return result
            }
        },
        //懒加载数据
        async onload (row, treeNode, resolve) {
            let result
            if(row.children.length > 0) {
                result = row.children
            }else{
                //如果不是子级，就从接口取
                if (!row.isDetailed) {
                    result = await this.getChildrenInfo(row.thisLevelId) //本级id
                    console.log('result', result)
                }else {
                    //是最子级，则初始为空，合并新增数据，并设为非最子级
                    result = []
                }
            }
            resolve(result)
        },
        //切换结构细目维度
        toggleDetail () {
            //if是true 结构->细目 false 细目->结构
            this.veidoo ? this.getStructureToListInfo() : this.getListToStructuretInfo()
        },
        search () {

        }
    },

}
</script>
<style lang="scss" scoped>
</style>